<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					icon="el-icon-scale-to-original"
					type="success"
					:disabled="!this.sourceSelection.length"
					@click="schedule">
					排产
				</el-button>
				<el-button
					icon="el-icon-scale-to-original"
					type="danger"
					:disabled="!this.targetSelection.length"
					@click="unschedule">
					反排产
				</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-alert title="工单排序越靠前执行优先级越高" type="success" show-icon :closable="false" />
				</div>
			</div>
		</el-header>
		<el-container>
			<el-aside width="40%">
				<scTable
					ref="sourceTable"
					:api-obj="this.$API.prodwoschedule.todopage"
					row-key="id"
					hideDo
					hideContextMenu
					@selection-change="sourceSelectionChange">
					<el-table-column fixed type="selection" align="center" width="40" />
					<el-table-column property="wo" label="工单单号" align="center" width="140" />
					<el-table-column property="productCode" label="产品编号" align="center" width="140" />
					<el-table-column property="product.itemName" label="产品名称" align="center" />
				</scTable>
			</el-aside>
			<el-main class="nopadding">
				<scTable
					ref="targetTable"
					:api-obj="this.$API.prodwoschedule.donepage"
					row-key="id"
					hideDo
					hideContextMenu
					@selection-change="targetSelectionChange">
					<!-- 固定列-选择列 -->
					<el-table-column fixed type="selection" :selectable="targetSelectable" align="center" width="40" />
					<el-table-column property="wo" label="工单单号" align="center" width="140" />
					<el-table-column property="workOrder.productCode" label="产品编号" align="center" width="140" />
					<el-table-column property="workOrder.product.itemName" label="产品名称" align="center" />
					<el-table-column property="lineCode" label="产线编号" align="center" width="140" />
					<el-table-column property="sort" label="排序" align="center" width="100">
						<template #default="scope">
							<el-link style="color: #5cd29d" :underline="false" @click="upSort(scope.row, scope.$index)">
								<el-icon><el-icon-top /></el-icon>
							</el-link>
							<el-divider direction="vertical" />
							<el-link
								style="color: #5cd29d"
								:underline="false"
								@click="downSort(scope.row, scope.$index)">
								<el-icon><el-icon-bottom /></el-icon>
							</el-link>
						</template>
					</el-table-column>
					<el-table-column property="workOrder.status" label="状态" align="center" width="80">
						<template #default="scope">
							<el-tag :type="statusType(scope.row.workOrder.status)">
								{{ scope.row.workOrder.statusDesc }}
							</el-tag>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>

		<modify ref="modify" @complete="complete" />
	</el-container>
</template>

<script>
import modify from "./modify";

export default {
	components: {
		modify,
	},
	data() {
		return {
			sourceSelection: [],
			targetSelection: [],
		};
	},
	methods: {
		complete() {
			this.$refs.sourceTable.refresh();
			this.$refs.targetTable.refresh();
		},
		statusType(status) {
			switch (status) {
				case 10: return 'info';
				case 20: return 'info';
				case 30: return '';
				case 40: return 'success';
				case 50: return 'Warning';
				case 60: return 'danger';
				default:
				return 'info';
			}
		},
		async upSort(row, index) {
			if (index === 0) {
				return;
			}

			const tableData = this.$refs.targetTable.tableData;
			const prevItem = tableData[index - 1];
			const input = { sourceId: row.id, targetId: prevItem.id };
			const resp = await this.$API.prodwoschedule.sort.put(input);
			if (resp.code == 200) {
				this.$refs.targetTable.refresh();
			} else {
				this.$alert(resp.message, "提示", { type: "error" });
			}
		},
		async downSort(row, index) {
			const tableData = this.$refs.targetTable.tableData;
			if (tableData.length === index + 1) {
				return;
			}

			const nextItem = tableData[index + 1];
			const input = { sourceId: row.id, targetId: nextItem.id };
			const resp = await this.$API.prodwoschedule.sort.put(input);
			if (resp.code == 200) {
				this.$refs.targetTable.refresh();
			} else {
				this.$alert(resp.message, "提示", { type: "error" });
			}
		},
		sourceSelectionChange(selection) {
			this.sourceSelection = selection;
		},
		targetSelectionChange(selection) {
			this.targetSelection = selection;
		},
		targetSelectable(row) {
			return row.workOrder.status === 20; // 仅可选择 "已排产" 项
		},
		schedule() {
			this.$refs.modify.open(this.sourceSelection);
		},
		unschedule() {
			this.$confirm(
				`确定反排产选中的 ${this.targetSelection.length} 项吗？`,
				"提示",
				{
					type: "warning",
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}
			).then(async () => {
				const resp = await this.$API.prodwoschedule.unschedule.post(this.targetSelection);
				if (resp.code == 200) {
					this.$message.success("反排产成功");
					this.complete();
				} else {
					this.$alert(resp.message, "提示", { type: "error" });
				}
			}).catch(() => { });
		},
	},
};
</script>
